/*
 * @Author: quit
 * @Date: 2023-02-28 06:48:44
 * @LastEditTime: 2023-02-28 08:19:44
 * @Descripttion:
 * 在使用Context时需要调用React.createContext()来创建 Provider 和 Consumer 两个组件
 * |-- 使用Provider组件作为父组件节点包裹
 * |-- 多组数据使用对象进行传递
 * @notice:
 */
import React from 'react'

const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    render() {
        return (
            <Provider value="pink">
                <div id="app">
                    <Parent></Parent>
                </div>
            </Provider>
        )
    }
}

class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child></Child>
            </div>
        )
    }
}

class Child extends React.Component {
    render() {
        return (
            <div>
                <GrandChild></GrandChild>
            </div>
        )
    }
}

class GrandChild extends React.Component {
    render() {
        return <Consumer>{data => <div>"使用Provider传递的值:" --- {data} </div>}</Consumer>
    }
}
